import { Popup,DatePickerView,Toast,Calendar } from "antd-mobile";
import { useEffect, useState } from "react";
import Styles from "./index.module.scss";

const DatePopup = (props:any) => {
    let { enterDate,showPopup,vis } = props;
    let [visible, setVisible] = useState(false);
    let [time, setTime] = useState(new Date());
    let changeTime = (e:any)=>{
        setTime(e)
    }
    let cancel = ()=>{
        showPopup(false)
    }
    let enter = ()=>{
        enterDate(time)
        showPopup(false)
    }
    useEffect(()=>{
        setVisible(vis)
    },[vis])
    return (
        <>
        <Popup
        visible={visible}
        onMaskClick={() => {
            showPopup(false)
        }}
        bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
        }}>
            <div className={Styles.DatePopup}>
                <div className={Styles.btns}>
                    <div className={Styles.cancel} onClick={()=>cancel()}>取消</div>
                    <div className={Styles.enter} onClick={()=>enter()}>确认</div>
                </div>
                <Calendar selectionMode='single' onChange={(e)=>changeTime(e)}/>
            </div>
        </Popup>
        </>
    )
  };
  export default DatePopup;